<template>
  <div class="content">
    <div class="header">
      <div class="search">
        <a-input
          v-model="state.searchKey"
          :style="{ width: '320px' }"
          placeholder="输入关键字搜索"
          allow-clear
          @clear="clearHandle"
        />
        <a-button
          type="primary"
          :loading="state.searchLoading"
          @click="searchHandle"
          >搜索</a-button
        >
      </div>
      <div class="btn">
        <a-button type="primary" @click="openModal">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新增</template>
        </a-button>
      </div>
    </div>
    <div class="table">
      <gridTable
        :columns="state.columns"
        :data="state.data"
        :action-func="actionhandle"
        :loading="state.searchLoading"
        :pagination="state.pagination"
        :page-change="pageChange"
      >
      </gridTable>
    </div>
    <!-- 弹出层 -->
    <a-modal
      v-model:visible="state.visible"
      width="auto"
      :mask-closable="false"
      title="新增护士服务"
      @cancel="Cancel"
    >
      <div v-if="state.isService">
        <a-form :model="state.form" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="id" label="上门编号">
                <a-input
                  v-model="state.form.id"
                  placeholder="输入上门编号"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="name" label="科室名称">
                <a-select
                  v-model="state.form.name"
                  :style="{ width: '320px' }"
                  placeholder="选择科室"
                >
                  <a-option
                    v-for="item of state.options"
                    :value="item.name"
                    :label="item.name"
                    :key="item.id"
                    @click="getClassifyList(item.name)"
                  />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="classify" label="科室分类">
                <a-select
                  v-model="state.form.classify"
                  :style="{ width: '320px' }"
                  placeholder="选择科室分类"
                >
                  <a-option
                    v-for="item of state.classifyOptions"
                    :value="item.classify"
                    :label="item.classify"
                    :key="item.id"
                  />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="servicename" label="护士服务">
                <a-select
                  v-model="state.form.servicename"
                  :style="{ width: '320px' }"
                  placeholder="选择服务"
                >
                  <a-option
                    v-for="item of state.serviceOptions"
                    :value="item.servicename"
                    :label="item.servicename"
                    :key="item.id"
                    @click="assignFees(item.fees, item.id)"
                  />
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="address" label="费用">
                <a-input v-model="state.form.fees" placeholder="输入费用" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="userName" label="护士姓名">
                <a-select
                  v-model="state.form.userName"
                  :style="{ width: '320px' }"
                  placeholder="选择护士"
                >
                  <a-option
                    v-for="item of state.nurseOptions"
                    :value="item.userName"
                    :label="item.userName"
                    :key="item.jobnumber"
                    @click="assignNum(item.jobnumber)"
                  />
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="jobnumber" label="护士工号">
                <a-input
                  v-model="state.form.jobnumber"
                  placeholder="输入护士工号"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="16">
              <a-form-item field="img" label="图片">
                <UploadMoudle
                  :file="state.form.img"
                  :id="state.form.id"
                  :custom-btn-func="beforeUpload"
                  @update="updateAvatar"
                ></UploadMoudle>
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item field="prove" label="就医证明">
                <a-textarea
                  v-model="state.form.prove"
                  placeholder="请输入"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item field="content" label="服务内容">
                <a-textarea
                  v-model="state.form.content"
                  placeholder="请输入"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div v-else>
        <a-form :model="state.serviceForm" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="servicename" label="护士服务">
                <a-input
                  v-model="state.serviceForm.servicename"
                  placeholder="输入服务"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="fees" label="费用">
                <a-input
                  v-model="state.serviceForm.fees"
                  placeholder="输入费用"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <div v-if="state.isService" class="foot">
          <a-button :style="{ marginRight: '10px' }" @click="Cancel"
            >上一步</a-button
          >
          <a-button type="primary" @click="onOK">提交</a-button>
        </div>
        <div v-else class="foot">
          <a-button :style="{ marginRight: '10px' }" @click="Cancel"
            >取消</a-button
          >
          <a-button type="primary" @click="onOK">下一步</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
import {
  Message,
  type TableColumnData,
  type TableData,
  type TableRowSelection,
} from "@arco-design/web-vue";
import gridTable from "@/components/table/gridTable.vue";
import { reactive, computed, watchEffect } from "vue";
import UploadMoudle from "@/components/upload/UploadMoudle.vue";
import { commonApi, serviceApi } from "@/api/index";

const renderImg = ({ column, record }) => {
  //  console.log(column.dataIndex);
  //  console.log(record[column.dataIndex]);
  return (
    <div>
      <a-image width="100" src={record[column.dataIndex]}></a-image>
    </div>
  );
};

const state = reactive({
  columns: [
    {
      title: "上门编号",
      dataIndex: "id",
    },
    {
      title: "科室名称",
      dataIndex: "name",
    },
    {
      title: "科室分类",
      dataIndex: "classify",
    },
    {
      title: "护士服务",
      dataIndex: "servicename",
    },
    {
      title: "费用",
      dataIndex: "fees",
    },
    {
      title: "图片",
      dataIndex: "img",
      render: renderImg,
    },
    {
      title: "护士工号",
      dataIndex: "jobnumber",
    },
    {
      title: "护士姓名",
      dataIndex: "userName",
    },
    {
      title: "操作",
      slotName: "optional",
      width: 100,
      action: [
        // {
        //   text: "详情",
        //   value: "detail",
        // },
        // {
        //   text: "修改",
        //   value: "revise",
        // },
        {
          text: "删除",
          value: "delete",
        },
      ],
    },
  ],
  data: [] as unknown as TableColumnData[],
  pagination: {
    current: 1,
    pageSize: 7,
    total: 0,
  },
  searchLoading: false,
  searchKey: "",
  department: "",
  options: [],
  classifyOptions: [],
  nurseOptions: [],
  serviceOptions: [],
  visible: false,
  isService: false,
  role: "nurse",
  serviceForm: {
    fees: "",
    servicename: "",
    role: "nurse",
  },
  form: {
    id: "",
    name: "",
    classify: "",
    img: "",
    fees: "",
    servicename: "",
    jobnumber: "",
    userName: "",
    prove: "",
    content: "",
    role: "nurse",
  },
  number: "",
});

watchEffect(() => {
  if (state.number && state.form.jobnumber) {
    state.form.id = state.form.jobnumber + state.number;
  }
});
const updateAvatar = (data) => {
  console.log(data);
  // console.log(form);
  state.form.img = data;
};
// 搜索
const searchHandle = async () => {
  if (state.searchKey) {
    state.searchLoading = true;
    getServiceInfoList();
  }
};
const clearHandle = async () => {
  state.searchKey = "";
  getServiceInfoList();
};
// 打开Modal
const openModal = () => {
  state.visible = true;
  getDepartmentList();
  getnurselist();
};
// 取消/上一步
const Cancel = () => {
  if (state.isService) {
    //上一步
    state.isService = false;
    state.form = {
      id: "",
      name: "",
      classify: "",
      img: "",
      fees: "",
      servicename: "",
      jobnumber: "",
      userName: "",
      prove: "",
      content: "",
      role: "nurse",
    };
  } else {
    //取消
    state.visible = false;
    state.serviceForm = {
      fees: "",
      servicename: "",
      role: "nurse",
    };
  }
};
// 下一步/提交
const onOK = () => {
  if (state.isService) {
    console.log(state.form);
    serviceApi
      .createServiceInfo(state.form)
      .then((res) => {
        console.log(res);
        if (res.code === 200) {
          Message.success({
            content: res.msg || "提交成功",
            position: "top",
          });
          state.visible = false;
          state.isService = false;
          state.form = {
            id: "",
            name: "",
            classify: "",
            img: "",
            fees: "",
            servicename: "",
            jobnumber: "",
            userName: "",
            prove: "",
            content: "",
            role: "nurse",
          };
          getServiceInfoList();
        } else {
          Message.error({
            content: res.msg || "error",
            position: "top",
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    if (state.serviceForm.servicename && state.serviceForm.fees) {
      serviceApi
        .createService(state.serviceForm)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            Message.success({
              content: res.msg || "提交成功",
              position: "top",
            });
            state.isService = true;
            state.serviceForm = {
              fees: "",
              servicename: "",
              role: "nurse",
            };
          } else {
            Message.error({
              content: res.msg || "error",
              position: "top",
            });
          }
          getServiceList();
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      state.isService = true;
      state.serviceForm = {
        fees: "",
        servicename: "",
        role: "nurse",
      };
      getServiceList();
    }
  }
};
// 操作
const actionhandle = (key, data) => {
  console.log(key, data);
  switch (key) {
    case "detail":
      console.log(data);
      Message.info({
        content: "开发中",
        position: "top",
      });
      break;
    case "revise":
      console.log(data);
      Message.info({
        content: "开发中",
        position: "top",
      });
      break;
    case "delete":
      deleteInfo(data.id);
      break;
  }
};
// 获取护士数据
const getnurselist = () => {
  commonApi
    .getRoleInfo({ option: true, role: state.role })
    .then((res) => {
      // console.log(res.data.result);
      if (res.code === 200) {
        state.nurseOptions = res.data.result;
      } else {
        console.log(res.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
// 工号赋值
const assignNum = (id) => {
  //  console.log(id);
  state.form.jobnumber = id;
};
// 费用赋值
const assignFees = (fees, id) => {
  //  console.log(id);
  state.form.fees = fees;
  state.number = id;
};
// 获取科室
const getDepartmentList = () => {
  commonApi
    .getDepartment({ key: "department" })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        state.options = res.data.result;
      } else {
        Message.error({
          content: res.msg || "error",
          position: "top",
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
// 获取科室分类
const getClassifyList = (searchKey) => {
  commonApi
    .getDepartment({ key: "classify", searchKey })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        state.classifyOptions = res.data.result;
      } else {
        console.log(res.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
// 上传图片前判断
const beforeUpload = (event) => {
  if (!state.form.id) {
    return new Promise((resolve, reject) => {
      Message.warning({
        content: "请先完成以上内容",
        position: "top",
      });
      resolve(event);
    });
  }
};
// 获取上门服务信息
const getServiceInfoList = () => {
  serviceApi
    .getServiceInfo({ searchKey: state.searchKey, role: state.role })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        state.data = res.data?.result;
        state.pagination.total = res.data?.result.length;
      } else {
        Message.error({
          content: res.msg || "error",
          position: "top",
        });
      }

      state.searchLoading = false;
    })
    .catch((err) => {
      console.log(err);
      Message.error({
        content: err.msg,
        position: "top",
      });
    });
};
getServiceInfoList();
// 分页
const pageChange = (page) => {
  // console.log(page);
  state.pagination.current = page;
};
// 删除
const deleteInfo = (id) => {
  serviceApi
    .deleteData({ id })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        Message.success({
          content: res.msg || "删除成功",
          position: "top",
        });
        getServiceInfoList();
      } else {
        Message.error({
          content: res.msg || "error",
          position: "top",
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
// 获取护士服务
const getServiceList = () => {
  serviceApi
    .getService({ role: state.role })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        state.serviceOptions = res.data.result;
      } else {
        console.log(res.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
.table {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search {
    width: 100%;
    padding: 20px 0;
  }
}
</style>
